<template>
  <div class="header-wrap">
    <div class="menu" @mouseenter="enter()" @mouseleave="leave()"> 
      <img src="@/assets/images/menu.png" alt="">
      <hovermenu v-show="isShowMenu" @urlChange="leave" class="hover-menu"></hovermenu>
    </div>
    <div class="header-title" @click="toHome">
      蓝天之下
    </div>
    <div class="loginForm">
      <p class="login">登录/注册</p>
      <!-- <p class="loginOut">退出登录</p> -->
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator"
import { TheRouter } from '@/router/theRouter'
import hovermenu from '@/components/menu/menu.vue'
@Component({
  components: {
    hovermenu
  }
})
export default class Header extends Vue {
  // data
  data: HeaderData = {
    pageName: 'header'
  }
  isShowMenu: boolean = false
  created() {
    //
  }
  toHome() {
    // this.$router.push({ name: 'home'})
    TheRouter.default().goToHome()
  }
  enter() {
    this.isShowMenu = true
  }
  leave() {
    this.isShowMenu = false
  }
}
export class HeaderData {
  'pageName': string
}
</script>

<style lang="scss" scoped>
  @import './header.scss';
</style>

